<template>
    <!-- 规则配置新增/修改弹窗 -->
    <div>
        <el-dialog v-model="dialogVisible" width="600px" :before-close="handleClose" title="规则配置" center>
            <div style="padding: 20px;">
                <el-form :model="form" ref="formRef" label-width="130px" label-suffix="：" :rules="rules">
                    <el-form-item label="规则名称" prop="ruleName">
                        <el-input v-model="form.ruleName" clearable placeholder="请输入规则名称"></el-input>
                    </el-form-item>
                    <el-form-item label="规则描述" prop="description">
                        <el-input v-model="form.description" clearable placeholder="请输入规则描述"></el-input>
                    </el-form-item>
                    <el-form-item label="告警严重性" prop="severity">
                        <el-select v-model="form.severity" placeholder="请选择告警严重性">
                            <el-option label="低" value="low"></el-option>
                            <el-option label="中" value="medium"></el-option>
                            <el-option label="高" value="high"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="触发告警对象:">
                        <el-radio-group v-model="pxType" @change="handlePxTypeChange">
                            <el-radio :value="0">硬件</el-radio>
                            <el-radio :value="1">日志</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="触发告警条件" v-if="pxType == 0">
                        <el-row>
                            <el-col :span="11">
                                <!-- <el-input  v-model="pxType2cond.mian" clearable placeholder="请输入硬件触发条件"></el-input> -->
                                 <el-select v-model="pxType2cond.mian" placeholder="请选择硬件告警对象">
                                    <el-option v-for="item in dataType" :key="item.id" :label="item.value" :value="item.value"></el-option>
                                 </el-select>
                            </el-col>
                            <el-col :span="4">
                                <el-select v-model="pxType2cond.tj" placeholder="">
                                    <el-option label=">" value=">"></el-option>
                                    <el-option label="=" value="="></el-option>
                                    <el-option label="<" value="<"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="9">
                                <el-input type="number" v-model="pxType2cond.val" clearable placeholder="请输入阀值"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item v-if="pxType == 1" label="触发告警条件" prop="cond">
                        <el-select  v-model="form.cond" placeholder="请选择日志告警对象">
                            <el-option label="info" value="info"></el-option>
                            <el-option label="debug" value="debug"></el-option>
                            <el-option label="warn" value="warn"></el-option>
                            <el-option label="fatal" value="fatal"></el-option>
                            <el-option label="error" value="error"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :value="0">关闭</el-radio>
                            <el-radio :value="1">开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div style="text-align: center">
                        <el-button type="primary" @click="handleSubmit">保存</el-button>
                        <el-button @click="handleClose">取消</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>

import { createRule, updateRule, getHardwareTypes } from "@/api/alert"
import { reactive, ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const dialogVisible = ref(false)
const pxType = ref(0);
const form = reactive({
    ruleName: '',
    description: '',
    severity: '低',
    cond: '',
    status: 1
})

const pxType2cond = reactive({
    mian: '',
    tj: '=',
    val: ''
})

const rules = {
    ruleName: [
        { required: true, message: '请输入规则名称', trigger: 'blur' }
    ],
    description: [
        { required: true, message: '请输入规则描述', trigger: 'blur' }
    ],
    severity: [
        { required: true, message: '请选择告警严重性', trigger: 'change' }
    ],
    cond: [
        { required: true, message: '请选择触发告警对象', trigger: 'change' }
    ]
}

const formRef = ref(null)

const handleClose = () => {
    dialogVisible.value = false
}
const showDialog = (updateData) => {
    getHardwareTypesFn();
    proxy.resetForm("formRef");
    if (updateData) {
        if(updateData.cond.split(' ').length > 1){
            pxType2cond.mian = updateData.cond.split(' ')[0]
            pxType2cond.tj = updateData.cond.split(' ')[1]
            pxType2cond.val = updateData.cond.split(' ')[2]
            pxType.value = 0
        }else{
            pxType2cond.mian = ''
            pxType2cond.tj = '='
            pxType2cond.val = ''
            pxType.value = 1
        }
        updateData.status = updateData.status ? 1 : 0
        Object.assign(form, updateData);
        dialogVisible.value = true
        return
    }
    resetForm();
    dialogVisible.value = true
}

const dataType = ref([])
// 获取硬件类型
const getHardwareTypesFn = () => {
    getHardwareTypes({ type: "system_hard_name" }).then(res => {
        dataType.value = res.data
    })
}

// 创建规则
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            if(pxType.value == 0){
                if(!pxType2cond.mian || !pxType2cond.val || !pxType2cond.tj){
                    proxy.$message.info('请输入触发告警条件')
                    return
                }
                form.cond = `${pxType2cond.mian} ${pxType2cond.tj} ${pxType2cond.val}`
            }
            if(form.id){
                updateRule(form).then(() => {
                    handleClose();
                    resetForm();
                    proxy.$message.success('规则配置修改成功')
                    // 刷新规则列表
                    proxy.$emit('refresh')
                })
                return
            }
            createRule(form).then(() => {
                handleClose();
                resetForm();
                proxy.$message.success('规则配置保存成功')
                // 刷新规则列表
                proxy.$emit('refresh')
            })
        }
    })
}


// 重置表单
const resetForm = () => {
    form.ruleName = '';
    form.description = '';
    form.severity = '低';
    form.cond = '';
    form.status = 1;
    pxType.value = 0;
    pxType2cond.mian = ''
    pxType2cond.tj = '='
    pxType2cond.val = ''
    form.id = null;
}

const handlePxTypeChange = (val) => {
    pxType.value = val
    form.cond = ''
}

defineExpose({
    showDialog
})

</script>

<style lang="scss" scoped></style>